<template>
  <el-card class='main-card'>
    <el-tabs v-model='activeName'>
      <el-tab-pane label='网站信息' name='info'>
        <el-form label-width='100px' :model='websiteConfigForm' label-position='left'>
          <el-form-item label='作者头像'>
            <el-upload
              class='avatar-uploader'
              action='/api/admin/config/images'
              :headers='headers'
              :show-file-list='false'
              :before-upload='beforeUpload'
              :on-success='handleAuthorAvatarSuccess'>
              <img v-if='websiteConfigForm.authorAvatar' :src='websiteConfigForm.authorAvatar' class='avatar'
                   alt='作者头像' />
              <i v-else class='el-icon-plus avatar-uploader-icon' />
            </el-upload>
          </el-form-item>
          <el-form-item label='网站logo'>
            <el-tabs>
              <el-tab-pane label='OSS上传'>
                <el-upload
                  class='avatar-uploader'
                  action='/api/admin/config/images'
                  :headers='headers'
                  :show-file-list='false'
                  :before-upload='beforeUpload'
                  :on-success='handleLogoSuccess'>
                  <img v-if='websiteConfigForm.logo' :src='websiteConfigForm.logo' class='avatar' alt='网站logo'
                       style='width: 550px;height: 150px;'/>
                  <i v-else class='el-icon-plus avatar-uploader-icon' />
                </el-upload>
              </el-tab-pane>
              <el-tab-pane label='直链上传'>
                <el-input v-model='websiteConfigForm.logo'/>
                <img v-if='websiteConfigForm.logo' :src='websiteConfigForm.logo' class='avatar' alt='网站logo'
                     style='width: 550px;height: 150px;'/>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
          <el-form-item label='favicon'>
            <el-upload
              class='avatar-uploader'
              action='/api/admin/config/images'
              :headers='headers'
              :show-file-list='false'
              :before-upload='beforeUpload'
              :on-success='handleFaviconSuccess'>
              <img v-if='websiteConfigForm.favicon' :src='websiteConfigForm.favicon' class='avatar' alt='favicon' />
              <i v-else class='el-icon-plus avatar-uploader-icon' />
            </el-upload>
          </el-form-item>
          <el-form-item label='网站名称'>
            <el-input v-model='websiteConfigForm.name' size='small' style='width: 400px' />
          </el-form-item>
          <el-form-item label='首页SEO描述'>
            <el-input v-model='websiteConfigForm.description' size='small' style='width: 400px' />
          </el-form-item>
          <el-form-item label='首页SEO关键词'>
            <el-input v-model='websiteConfigForm.keyWords' size='small' style='width: 400px' />
          </el-form-item>
          <el-form-item label='头部HTML标签'>
            <el-input v-model='websiteConfigForm.htmlTag'
                      type="textarea"
                      style='width: 900px;'
                      :rows="10"
                      placeholder="通常情况下，这里是用来放置自定义的css"/>
          </el-form-item>
          <el-form-item label='底部HTML标签'>
            <el-input v-model='websiteConfigForm.footerCode'
                      type="textarea"
                      style='width: 900px;'
                      :rows="10"
                      placeholder="你可以添加站点的<style>、<script>等标签，通常情况下，这里是用来加载额外的css代码"/>
          </el-form-item>
          <el-form-item label='网站作者'>
            <el-input v-model='websiteConfigForm.author' size='small' style='width: 400px' />
          </el-form-item>
          <el-form-item label='网页标题'>
            <el-input v-model='websiteConfigForm.websiteTitle' size='small' style='width: 400px' />
          </el-form-item>
          <el-form-item label='作者介绍'>
            <el-input v-model='websiteConfigForm.authorIntro' size='small' style='width: 400px' />
          </el-form-item>
          <el-form-item label='网站创建日期'>
            <el-date-picker
              style='width: 400px'
              value-format='yyyy-MM-dd'
              v-model='websiteConfigForm.websiteCreateTime'
              type='date'
              placeholder='选择日期' />
          </el-form-item>
          <el-form-item label='网站公告'>
            <el-input
              v-model='websiteConfigForm.notice'
              placeholder='请输入公告内容'
              style='width: 400px'
              type='textarea'
              :rows='5' />
          </el-form-item>
          <el-form-item label='网站首页致谢'>
            <el-input v-model='websiteConfigForm.homeThank'
                      maxlength="20"
                      style='width: 400px'
                      type='textarea'
                      show-word-limit
                      :row='3'/>
          </el-form-item>
          <el-form-item label='工信部备案号'>
            <el-input v-model='websiteConfigForm.beianNumber' size='small' style='width: 400px' />
          </el-form-item>
          <el-form-item label='公安部备案号'>
            <el-input v-model='websiteConfigForm.gonganBeianNumber' size='small' style='width: 400px' />
          </el-form-item>
          <el-form-item label='qq登录'>
            <el-radio-group v-model='websiteConfigForm.qqLogin'>
              <el-radio :label='0'>关闭</el-radio>
              <el-radio :label='1'>开启</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label='友链申请'>
            <el-radio-group v-model='websiteConfigForm.isLinkApply'>
              <el-radio :label='0'>关闭</el-radio>
              <el-radio :label='1'>开启</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-button type='primary' size='medium' style='margin-left: 6.3rem' @click='updateWebsiteConfig'>
            修改
          </el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label='社交信息' name='notice'>
        <el-tag type="warning" style='margin-left: 90px'>Tip:空白默认不显示,输入框后为类型提示</el-tag>
        <el-form label-width='90px' :model='websiteConfigForm'>
          <el-form-item label='Github'>
            <el-input v-model='websiteConfigForm.github' size='small' style='width: 400px; margin-right: 1rem'/>
            <el-tag>地址链接</el-tag>
          </el-form-item>
          <el-form-item label='Gitee'>
            <el-input v-model='websiteConfigForm.gitee' size='small' style='width: 400px; margin-right: 1rem' />
            <el-tag>地址链接</el-tag>
          </el-form-item>
          <el-form-item label='QQ'>
            <el-input v-model='websiteConfigForm.qq' size='small' style='width: 400px; margin-right: 1rem'/>
            <el-tag>QQ号码</el-tag>
          </el-form-item>
          <el-form-item label='WeChat'>
            <el-input v-model='websiteConfigForm.weChat' size='small' style='width: 400px; margin-right: 1rem' />
            <el-tag>微信号码</el-tag>
          </el-form-item>
          <el-form-item label='微博'>
            <el-input v-model='websiteConfigForm.weibo' size='small' style='width: 400px; margin-right: 1rem' />
            <el-tag>地址链接</el-tag>
          </el-form-item>
          <el-form-item label='CSDN'>
            <el-input v-model='websiteConfigForm.csdn' size='small' style='width: 400px; margin-right: 1rem' />
            <el-tag>地址链接</el-tag>
          </el-form-item>
          <el-form-item label='知乎'>
            <el-input v-model='websiteConfigForm.zhihu' size='small' style='width: 400px; margin-right: 1rem' />
            <el-tag>地址链接</el-tag>
          </el-form-item>
          <el-form-item label='掘金'>
            <el-input v-model='websiteConfigForm.juejin' size='small' style='width: 400px; margin-right: 1rem' />
            <el-tag>地址链接</el-tag>
          </el-form-item>
          <el-form-item label='twitter'>
            <el-input v-model='websiteConfigForm.twitter' size='small' style='width: 400px; margin-right: 1rem' />
            <el-tag>地址链接</el-tag>
          </el-form-item>
          <el-form-item label='stackoverflow'>
            <el-input v-model='websiteConfigForm.stackoverflow' size='small' style='width: 400px; margin-right: 1rem' />
            <el-tag>地址链接</el-tag>
          </el-form-item>
          <el-button type='primary' size='medium' style='margin-left: 5.85rem' @click='updateWebsiteConfig'>
            修改
          </el-button>
        </el-form>
      </el-tab-pane>
      <!-- 协议开始 -->
      <el-tab-pane label='站点协议'>
        <el-form :model='agreements'>
          <el-form-item>
            <div class='site-agreement'>
              <el-input placeholder='请输入内容' v-model='agreements.title'>
                <template slot='prepend'>协议标题</template>
              </el-input>
              <el-button type="primary" plain @click='saveOrUpdateSiteAgreement' class='publish-btn' icon='el-icon-position'>
                发布协议</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <mavon-editor ref='md' v-model='agreements.content' @imgAdd='uploadImg'
                          style='height: calc(75vh - 100px);margin-top: 1.25rem' />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 协议结束 -->
      <!-- 友链页配置开始 -->
      <el-tab-pane label='友链配置'>
        <el-form label-width='120px' :model='websiteConfigForm'>
          <el-form-item label='友链页本站头像'>
            <el-input v-model='websiteConfigForm.websiteAvatar' size='small' style='width: 500px;'/>
          </el-form-item>
          <el-form-item label='友链页本站链接'>
            <el-input v-model='websiteConfigForm.websiteUrl' size='small' style='width: 500px;'/>
          </el-form-item>
          <el-form-item label='友链页站点截图'>
            <el-input v-model='websiteConfigForm.screenShot' size='small' style='width: 500px;'/>
          </el-form-item>
          <el-button type='primary' size='medium' style='margin-left: 7.5rem' @click='updateWebsiteConfig'>
            保存
          </el-button>
        </el-form>
      </el-tab-pane>
      <!-- 友链页结束 -->
      <el-tab-pane label='其他设置' name='password'>
        <el-form label-width='120px' :model='websiteConfigForm' label-position='left'>
          <el-form-item label='头像徽章'>
            <el-tabs type="border-card">
              <el-tab-pane label='OSS上传'>
                <el-upload
                  class='avatar-uploader'
                  action='/api/admin/config/images'
                  :headers='headers'
                  :show-file-list='false'
                  :before-upload='beforeUpload'
                  :on-success='handleUserAvatarSuccess'>
                  <img v-if='websiteConfigForm.userAvatar' :src='websiteConfigForm.userAvatar' class='avatar'
                       alt='头像徽章' />
                  <i v-else class='el-icon-plus avatar-uploader-icon' />
                </el-upload>
              </el-tab-pane>
              <el-tab-pane label='直链上传'>
                <el-input v-model='websiteConfigForm.userAvatar'/>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
          <el-form-item label='游客头像'>
            <el-tabs type="border-card">
              <el-tab-pane label='OSS'>
                <el-upload
                  class='avatar-uploader'
                  action='/api/admin/config/images'
                  :headers='headers'
                  :show-file-list='false'
                  :before-upload='beforeUpload'
                  :on-success='handleTouristAvatarSuccess'>
                  <img v-if='websiteConfigForm.touristAvatar' :src='websiteConfigForm.touristAvatar' class='avatar'
                       alt='游客头像' />
                  <i v-else class='el-icon-plus avatar-uploader-icon' />
                </el-upload>
              </el-tab-pane>
              <el-tab-pane label='直链上传'>
                <el-input v-model='websiteConfigForm.touristAvatar'/>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
          <el-form-item label='邮箱通知'>
            <el-radio-group v-model='websiteConfigForm.isEmailNotice'>
              <el-radio :label='1'>开启</el-radio>
              <el-radio :label='0'>关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label='评论审核'>
            <el-radio-group v-model='websiteConfigForm.isCommentReview'>
              <el-radio :label='1'>开启</el-radio>
              <el-radio :label='0'>关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label='打赏状态'>
            <el-radio-group v-model='websiteConfigForm.isReward'>
              <el-radio :label='1'>开启</el-radio>
              <el-radio :label='0'>关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row style='width: 1000px' v-show='websiteConfigForm.isReward === 1'>
            <el-col :md='12'>
              <el-form-item label='微信收款码'>
                <el-tabs type="border-card">
                  <el-tab-pane label='OSS'>
                    <el-upload
                      class='avatar-uploader'
                      action='/api/admin/config/images'
                      :headers='headers'
                      :show-file-list='false'
                      :before-upload='beforeUpload'
                      :on-success='handleWeiXinSuccess'>
                      <img v-if='websiteConfigForm.weiXinQRCode' :src='websiteConfigForm.weiXinQRCode' class='avatar'
                           alt='微信打赏' />
                      <i v-else class='el-icon-plus avatar-uploader-icon' />
                    </el-upload>
                  </el-tab-pane>
                  <el-tab-pane label='直链上传'>
                    <el-input v-model='websiteConfigForm.weiXinQRCode'/>
                  </el-tab-pane>
                </el-tabs>
              </el-form-item>
            </el-col>
            <el-col :md='12'>
              <el-form-item label='支付宝收款码'>
                <el-tabs type="border-card">
                  <el-tab-pane label='OSS'>
                    <el-upload
                      class='avatar-uploader'
                      action='/api/admin/config/images'
                      :headers='headers'
                      :show-file-list='false'
                      :before-upload='beforeUpload'
                      :on-success='handleAlipaySuccess'>
                      <img v-if='websiteConfigForm.alipayQRCode' :src='websiteConfigForm.alipayQRCode' class='avatar'
                           alt='支付宝打赏' />
                      <i v-else class='el-icon-plus avatar-uploader-icon' />
                    </el-upload>
                  </el-tab-pane>
                  <el-tab-pane label='直链上传'>
                    <el-input v-model='websiteConfigForm.alipayQRCode'/>
                  </el-tab-pane>
                </el-tabs>
              </el-form-item>
            </el-col>
          </el-row>
          <el-button type='primary' size='medium' style='margin-left: 6.3rem' @click='updateWebsiteConfig'>
            修改
          </el-button>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import * as imageConversion from 'image-conversion'

export default {
  created() {
    this.getWebsiteConfig()
    this.listSiteAgreement()
  },
  data: function() {
    return {
      websiteConfigForm: {},
      activeName: 'info',
      agreements: {
        title: '',
        content: ''
      },
      headers: { Authorization: 'Bearer ' + sessionStorage.getItem('token') }
    }
  },
  methods: {
    getWebsiteConfig() {
      this.axios.get('/api/admin/website/config').then(({ data }) => {
        this.websiteConfigForm = data.data
      })
    },
    handleAuthorAvatarSuccess(response) {
      this.websiteConfigForm.authorAvatar = response.data
    },
    handleFaviconSuccess(response) {
      this.websiteConfigForm.favicon = response.data
    },
    handleLogoSuccess(response) {
      this.websiteConfigForm.logo = response.data
    },
    handleUserAvatarSuccess(response) {
      this.websiteConfigForm.userAvatar = response.data
    },
    handleTouristAvatarSuccess(response) {
      this.websiteConfigForm.touristAvatar = response.data
    },
    handleWeiXinSuccess(response) {
      this.websiteConfigForm.weiXinQRCode = response.data
    },
    handleAlipaySuccess(response) {
      this.websiteConfigForm.alipayQRCode = response.data
    },
    beforeUpload(file) {
      return new Promise((resolve) => {
        if (file.size / 1024 < this.config.UPLOAD_SIZE) {
          resolve(file)
        }
        imageConversion.compressAccurately(file, this.config.UPLOAD_SIZE).then((res) => {
          resolve(res)
        })
      })
    },
    updateWebsiteConfig() {
      console.log("show",this.websiteConfigForm)
      this.axios.put('/api/admin/website/config', this.websiteConfigForm).then(({ data }) => {
        if (data.flag) {
          this.$notify.success({
            title: '成功',
            message: data.message
          })
        } else {
          this.$notify.error({
            title: '失败',
            message: data.message
          })
        }
      })
    },
    uploadImg(pos, file) {
      let formdata = new FormData()
      if (file.size / 1024 < this.config.UPLOAD_SIZE) {
        formdata.append('file', file)
        this.axios.post('/api/admin/agreement/images', formdata).then(({ data }) => {
          this.$refs.md.$img2Url(pos, data.data)
        })
      } else {
        imageConversion.compressAccurately(file, this.config.UPLOAD_SIZE).then((res) => {
          formdata.append('file', new window.File([res], file.name, { type: file.type }))
          this.axios.post('/api/admin/agreement/images', formdata).then(({ data }) => {
            this.$refs.md.$img2Url(pos, data.data)
          })
        })
      }
    },
    saveOrUpdateSiteAgreement() {
      if(this.agreements.title.trim()===''){
        this.$message.error('协议标题不能为空')
        return false
      }
      if (this.agreements.content.trim()===''){
        this.$message.error('协议内容不能为空')
        return false
      }
      this.axios
        .post('/api/admin/site/agreement',this.agreements).then(({ data }) => {
        if (data.flag) {
          this.$notify.success({
            title: '成功',
            message: data.message
          })
        } else {
          this.$notify.error({
            title: '失败',
            message: data.message
          })
        }
      })
    },
    listSiteAgreement(){
        this.axios.get('/api/admin/agreement').then(({ data }) => {
          this.agreements = data.data
        })
    }
  }
}
</script>

<style>
.user-agreement, .site-agreement {
    display: flex;
    align-items: center;
    margin-top: 2.25rem;
}

.publish-btn {
    margin-left: 0.75rem;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}
</style>
